import { DotLoading, InfiniteScroll, Empty } from 'antd-mobile'
import { useHistory } from 'umi'
import styles from '../index.module.less'
import { observer, useLocalObservable } from 'mobx-react'
import Store from '../store'
import { useEffect } from 'react'
import { getDate } from '@/utils/formatterDate'
import { RightOutline } from 'antd-mobile-icons'

export default observer(() => {
    const { trainList, trainHasMore, trainListParams, setTrainParams } = useLocalObservable(
        () => Store,
    )
    const history = useHistory()

    async function loadMore() {
        setTrainParams({
            page: trainListParams.page + 1,
        })
    }

    const auditMap = {
        0: {
            text: '待接收',
            className: styles.preAccepted,
        },
        1: {
            text: '已通过',
            className: styles.accepted,
        },
        2: {
            text: '已拒绝',
            className: styles.reject,
        },
    }

    const goDetail = (id: number) => {
        history.push('/train/detail', { id })
    }

    useEffect(() => {
        setTrainParams({ search: true })
    }, [])

    return (
        <div className={styles.content}>
            {trainList.length > 0 ? (
                <>
                    {trainList.map(item => {
                        let status

                        if (item.province_check_status !== 0) {
                            status = item.province_check_status
                        }
                        if (item.center_check_status !== 0) {
                            status = item.center_check_status
                        }

                        return (
                            <div
                                className={styles.listItem}
                                key={item.id}
                                onClick={() => goDetail(item.id)}
                            >
                                <div className={styles.infoView}>
                                    <div className={styles.title}>
                                        <span>{item.name}</span>
                                        <div className={auditMap[status].className}>
                                            {auditMap[status].text}
                                        </div>
                                    </div>
                                    <div className={styles.trainInfo}>
                                        <div>
                                            <span>单位： {item.company_name}</span>
                                            <span>
                                                培训时间： {getDate(item.start_date)}至
                                                {getDate(item.end_date)}
                                            </span>
                                        </div>
                                        <RightOutline />
                                    </div>
                                </div>
                            </div>
                        )
                    })}
                    <InfiniteScroll loadMore={loadMore} hasMore={trainHasMore}>
                        {trainHasMore ? (
                            <>
                                <span>Loading</span>
                                <DotLoading />
                            </>
                        ) : (
                            <span>~ 人家也是有底的 ~</span>
                        )}
                    </InfiniteScroll>
                </>
            ) : (
                <Empty description="暂无数据" />
            )}
        </div>
    )
})
